<template>
	<view class="container" :style="{paddingTop:$u.addUnit($u.getPx(navbarHeight)+$u.sys().statusBarHeight,'px')}">
		<l-swiper :height="320" :banner="swiper_list" v-model="curr"></l-swiper>
		<view class="content">
			<view class="menuCard Card">
				<view class="flex-column-c-c" v-for="menu in menuList">
					<image :src="`/static/img/${menu.icon}.svg`" mode=""></image>
					<text>{{menu.name}}</text>
				</view>
			</view>
			<title-bar title="服务包推荐" page-url="url"></title-bar>
			<image class="cardImg" src="http://wrj.siring.com.cn/uploads/20250731/28da8a73b4451ca8224c0333c0839585.png"
				mode="">
			</image>
			<title-bar title="体质数据" page-url="url"></title-bar>
			<empty-data></empty-data>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/title-bar.vue'
	import emptyData from '@/components/empty-data.vue'
	export default {
		components: {
			titleBar,
			emptyData
		},
		data() {
			return {
				curr:0,
				navbarHeight: uni.$u.props.navbar.height,
				swiper_list: ['http://wrj.siring.com.cn/uploads/20250731/28da8a73b4451ca8224c0333c0839585.png',
					'http://wrj.siring.com.cn/uploads/20250730/1dc6d255b212be2386bc6d7db13eeb2b.jpg'
				], //轮播图
				menuList: [{
						name: '中医体质',
						icon: 'menu-001'
					},
					{
						name: '肤质检测',
						icon: 'menu-002'
					},
					{
						name: '健康问答',
						icon: 'menu-003'
					},
					{
						name: '一键建档',
						icon: 'menu-004'
					},
					{
						name: '产品溯源',
						icon: 'menu-005'
					},
				],
			}
		}
	}
</script>

<style lang="scss" scoped>

	.content {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.menuCard {
			display: flex;
			font-size: 26rpx;
			color: #000000;
			padding: 30rpx 0;

			view {
				flex: 1;
			}

			image {
				width: 90rpx;
				height: 90rpx;
				padding-bottom: 20rpx;
			}
		}

		.cardImg {
			width: 100%;
			height: 240rpx;
			border-radius: 20rpx;
		}
	}
</style>